<template>
<div  class="video_box">
  <div class="video" id="video"></div>
  <div class="videoManipulation">
      <videoManipulation  @setControl="setControl" />
  </div>
</div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import PreviewOCX from "@/utils/PreviewClass.js";
import videoManipulation from './videoManipulation.vue'
@Component({
  components:{videoManipulation}
})
export default class video extends Vue {
  @Prop() rowVodeoid!: any;
  PreviewOCX: any = null;
  formData = {
    indexCode: "",
    stationId: "",
    preset: "",
  };
  videoApi() {
    let {indexCode,stationId}=this.formData;
    (this as any).$services
      .getPreview({ data: {indexCode,stationId}, dataType: "text" })
      .then((xml: any) => {
        // console.log(xml);
        let ocx = this.PreviewOCX;
        var winindex = ocx.getSelectWindow();
        // console.log(
        //   "winindex:" + winindex,
        //   "ocx.startPreview(winindex, xml):" + ocx.startPreview(winindex, xml)
        // );
        if (ocx.startPreview(winindex, xml) === 0) {
          if (ocx.setSelectWindow(winindex + 1) === -1) {
            ocx.setSelectWindow(0);
          }
        }
        
        this.ptzGetPoint(this.formData.preset, this.PreviewOCX.PTZ_CMD_START)
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  // 初始化视频插件
  init() {
    let ocx = (this.PreviewOCX = new (PreviewOCX as any)({
      divId: "video",
      theme: "",
    }));
    return ocx;
  }
  tokenCallEvent(reqID) {
    let data = {
      stationId: this.formData.stationId,
      // stationId: this.shipinData.stationId,
    };
    (this as any).$services
      .getTokens({ data, dataType: "text" })
      .then((result: any) => {
        console.log(123, result);
        this.PreviewOCX.setToken(reqID, result);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
      // 转动到预置位
	ptzGetPoint(pointIndex, action) {
		var xml = [];
		xml.push("<?xml version=\"1.0\" encoding=\"utf-8\"?>");
		xml.push("<PtzControl>");
		xml.push("<Action>" + action + "</Action>");
		xml.push("<Priority>50</Priority>");
		xml.push("<Speed>5</Speed>");
		xml.push("<Preset Index =" + pointIndex + " DwellTime=50 Speed=5 />");
		xml.push("</PtzControl>");
		if (this.PreviewOCX.ptzControl(this.PreviewOCX.PRESET_CMD_GOTO_PRESET, xml.join("")) == this.PreviewOCX.SUCCESS) {
			console.log("预置位调用成功");
			return this.PreviewOCX.SUCCESS;
		} else {
			console.log("预置位调用失败");
			return this.PreviewOCX.FAILED;
		}
	}
  // 设置云台控制
  setControl(id) {
    let obj = {
      "01": "controlUpStart",
      "02": "controlUpStop",
      "03": "controlDownStart",
      "04": "controlDownStop",
      "05": "controlLeftStart",
      "06": "controlLeftStop",
      "07": "controlRightStart",
      "08": "controlRightStop",
      "09": "controlZoomInStart",
      "10": "controlZoomInStop",
      "11": "controlZoomOutStart",
      "12": "controlZoomOutStop",
      "13": "controlFocusNearStart",
      "14": "controlFocusNearStop",
      "15": "controlFocusFarStart",
      "16": "controlFocusFarStop",
      "17": "controlIrisOpenStart",
      "18": "controlIrisOpenStop",
      "19": "controlIrisCloseStart",
      "20": "controlIrisCloseStop",
    };

      let PreviewOCX = this.PreviewOCX;
      let callback = PreviewOCX[obj[id]];
      if (callback) {
        callback.call(PreviewOCX);
      }
    
  }

    mounted() {
    let ocx = this.init();
    ocx.setWindowsLayout(1);
    ocx.setCallBack();
    ocx.setTokenCallEvent(this.tokenCallEvent.bind(this));
  }
  @Watch("rowVodeoid")
  public Vodeoidchange(to: any, from: any) {
    let dwid = this.rowVodeoid;
    (this as any).$services
      .onlineMonitorQueryVideo({ data: { dwid } })
      .then((result: any) => {
        this.formData.indexCode = result.data[0].videoCode;
        this.formData.stationId = result.data[0].stationId;
        this.formData.preset = result.data[0].preset;
        this.videoApi();
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
}
</script>

<style lang="scss" scoped>
.video_box {
  width: 100%;
  height: 100%;
  display: flex;
  .video{
    width: 75%;
    height: 100%;
  }
  .videoManipulation{
width: 25%;
    height: 100%;
  }
}
</style>

